<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<title>图片编辑器</title>
		<link rel="stylesheet" href="/admin/picedit/styles.min.css?v19">
		<link href='/admin/picedit/css.css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
		<style>
			body,
			html {
				margin: 0;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<pixie-editor>
			<div class="global-spinner">
				<style>
					.global-spinner {
						display: none;
						align-items: center;
						justify-content: center;
						z-index: 999;
						background: #fff;
						position: fixed;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				</style>
				<style>
					.la-ball-spin-clockwise,
					.la-ball-spin-clockwise>div {
						position: relative;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box
					}

					.la-ball-spin-clockwise {
						display: block;
						font-size: 0;
						color: #1976d2
					}

					.la-ball-spin-clockwise.la-dark {
						color: #333
					}

					.la-ball-spin-clockwise>div {
						display: inline-block;
						float: none;
						background-color: currentColor;
						border: 0 solid currentColor
					}

					.la-ball-spin-clockwise {
						width: 32px;
						height: 32px
					}

					.la-ball-spin-clockwise>div {
						position: absolute;
						top: 50%;
						left: 50%;
						width: 8px;
						height: 8px;
						margin-top: -4px;
						margin-left: -4px;
						border-radius: 100%;
						-webkit-animation: ball-spin-clockwise 1s infinite ease-in-out;
						-moz-animation: ball-spin-clockwise 1s infinite ease-in-out;
						-o-animation: ball-spin-clockwise 1s infinite ease-in-out;
						animation: ball-spin-clockwise 1s infinite ease-in-out
					}

					.la-ball-spin-clockwise>div:nth-child(1) {
						top: 5%;
						left: 50%;
						-webkit-animation-delay: -.875s;
						-moz-animation-delay: -.875s;
						-o-animation-delay: -.875s;
						animation-delay: -.875s
					}

					.la-ball-spin-clockwise>div:nth-child(2) {
						top: 18.1801948466%;
						left: 81.8198051534%;
						-webkit-animation-delay: -.75s;
						-moz-animation-delay: -.75s;
						-o-animation-delay: -.75s;
						animation-delay: -.75s
					}

					.la-ball-spin-clockwise>div:nth-child(3) {
						top: 50%;
						left: 95%;
						-webkit-animation-delay: -.625s;
						-moz-animation-delay: -.625s;
						-o-animation-delay: -.625s;
						animation-delay: -.625s
					}

					.la-ball-spin-clockwise>div:nth-child(4) {
						top: 81.8198051534%;
						left: 81.8198051534%;
						-webkit-animation-delay: -.5s;
						-moz-animation-delay: -.5s;
						-o-animation-delay: -.5s;
						animation-delay: -.5s
					}

					.la-ball-spin-clockwise>div:nth-child(5) {
						top: 94.9999999966%;
						left: 50.0000000005%;
						-webkit-animation-delay: -.375s;
						-moz-animation-delay: -.375s;
						-o-animation-delay: -.375s;
						animation-delay: -.375s
					}

					.la-ball-spin-clockwise>div:nth-child(6) {
						top: 81.8198046966%;
						left: 18.1801949248%;
						-webkit-animation-delay: -.25s;
						-moz-animation-delay: -.25s;
						-o-animation-delay: -.25s;
						animation-delay: -.25s
					}

					.la-ball-spin-clockwise>div:nth-child(7) {
						top: 49.9999750815%;
						left: 5.0000051215%;
						-webkit-animation-delay: -.125s;
						-moz-animation-delay: -.125s;
						-o-animation-delay: -.125s;
						animation-delay: -.125s
					}

					.la-ball-spin-clockwise>div:nth-child(8) {
						top: 18.179464974%;
						left: 18.1803700518%;
						-webkit-animation-delay: 0s;
						-moz-animation-delay: 0s;
						-o-animation-delay: 0s;
						animation-delay: 0s
					}

					.la-ball-spin-clockwise.la-sm {
						width: 16px;
						height: 16px
					}

					.la-ball-spin-clockwise.la-sm>div {
						width: 4px;
						height: 4px;
						margin-top: -2px;
						margin-left: -2px
					}

					.la-ball-spin-clockwise.la-2x {
						width: 64px;
						height: 64px
					}

					.la-ball-spin-clockwise.la-2x>div {
						width: 16px;
						height: 16px;
						margin-top: -8px;
						margin-left: -8px
					}

					.la-ball-spin-clockwise.la-3x {
						width: 96px;
						height: 96px
					}

					.la-ball-spin-clockwise.la-3x>div {
						width: 24px;
						height: 24px;
						margin-top: -12px;
						margin-left: -12px
					}

					@-webkit-keyframes ball-spin-clockwise {

						0%,
						100% {
							opacity: 1;
							-webkit-transform: scale(1);
							transform: scale(1)
						}

						20% {
							opacity: 1
						}

						80% {
							opacity: 0;
							-webkit-transform: scale(0);
							transform: scale(0)
						}
					}

					@-moz-keyframes ball-spin-clockwise {

						0%,
						100% {
							opacity: 1;
							-moz-transform: scale(1);
							transform: scale(1)
						}

						20% {
							opacity: 1
						}

						80% {
							opacity: 0;
							-moz-transform: scale(0);
							transform: scale(0)
						}
					}

					@-o-keyframes ball-spin-clockwise {

						0%,
						100% {
							opacity: 1;
							-o-transform: scale(1);
							transform: scale(1)
						}

						20% {
							opacity: 1
						}

						80% {
							opacity: 0;
							-o-transform: scale(0);
							transform: scale(0)
						}
					}

					@keyframes ball-spin-clockwise {

						0%,
						100% {
							opacity: 1;
							-webkit-transform: scale(1);
							-moz-transform: scale(1);
							-o-transform: scale(1);
							transform: scale(1)
						}

						20% {
							opacity: 1
						}

						80% {
							opacity: 0;
							-webkit-transform: scale(0);
							-moz-transform: scale(0);
							-o-transform: scale(0);
							transform: scale(0)
						}
					}
				</style>
				<div class="la-ball-spin-clockwise la-2x">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<script>
				setTimeout(function() {
					var spinner = document.querySelector('.global-spinner');
					if (spinner) spinner.style.display = 'flex';
				}, 50);
			</script>
		</pixie-editor>
		<div style="">
			<canvas id="rest" style="display:none;"></canvas>
		</div>
		<script src="/admin/config/config.js"></script>
		<script src="/admin/picedit/scripts.min.js?v29"></script>
		<script src="/admin/picedit/jquery.min.js"></script>
		<!--script src="/admin/picedit/assets/lib/layer.js"></script-->
		<script src="/admin/component/layer/layer.js"></script>
		<script>
			
			let req = _req();
			let id = req.id;
			console.log(id)
			window.history.pushState(null, null, "/admin/picedit/");
			let pixie = new Pixie({
				languages: {
					active: "lang_zh",
					custom: {
						lang_es: {
							filter: "Filtrar",
							resize: "redimensionar",
							crop: "cultivo"
						},
						lang_zh: {
							filter: "\u6ee4\u955c",
							resize: "\u8c03\u6574\u5927\u5c0f",
							crop: "\u88c1\u526a",
							transform: "\u53d8\u6362",
							draw: "\u7ed8\u56fe",
							drawing: "\u7ed8\u56fe",
							text: "\u6587\u5b57",
							shape: "\u5f62\u72b6",
							shapes: "\u5f62\u72b6",
							sticker: "\u8d34\u56fe",
							stickers: "\u8d34\u56fe",
							frame: "\u8fb9\u6846",
							corners: "\u5706\u89d2",
							background: "\u80cc\u666f",
							merge: "\u5408\u5e76",
							History: "\u5386\u53f2\u52a8\u4f5c",
							Objects: "\u5bf9\u8c61",
							image: "\u56fe\u7247",
							mainImage: "\u4e3b\u56fe",
							"Canvas Background": "\u753b\u5e03\u80cc\u666f",
							Width: "\u5bbd\u5ea6",
							Height: "\u9ad8\u5ea6",
							"Brush Color": "\u7b14\u5237\u989c\u8272",
							"Brush Type": "\u7b14\u5237\u7c7b\u578b",
							"Brush Size": "\u7b14\u5237\u5927\u5c0f",
							Cancel: "\u53d6\u6d88",
							Close: "\u5173\u95ed",
							Apply: "\u5e94\u7528",
							Size: "\u5c3a\u5bf8",
							"Maintain Aspect Ratio": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
							"Use Percentages": "\u4f7f\u7528\u767e\u5206\u6bd4",
							Radius: "\u534a\u5f84",
							"Align Text": "\u5bf9\u9f50\u6587\u5b57",
							"Format Text": "\u683c\u5f0f\u5316\u6587\u5b57",
							"Color Picker": "\u989c\u8272",
							"Add Text": "\u6dfb\u52a0\u6587\u5b57",
							Font: "\u5b57\u4f53",
							Upload: "\u4e0a\u4f20",
							"Google Fonts": "Google\u5b57\u4f53",
							"Search...": "\u641c\u7d22...",
							Shadow: "\u9634\u5f71",
							Color: "\u989c\u8272",
							Outline: "\u8f6e\u5ed3",
							Background: "\u80cc\u666f",
							Texture: "\u7eb9\u7406",
							Gradient: "\u6e10\u53d8",
							"Text Style": "\u6587\u5b57\u98ce\u683c",
							Delete: "\u5220\u9664",
							"Background Color": "\u80cc\u666f\u8272",
							"Outline Width": "\u8f6e\u5ed3\u5bbd\u5ea6",
							Blur: "Blur",
							"Offset X": "Offset X",
							"Offset Y": "Offset Y",
							Open: "\u6253\u5f00",
							Save: "\u4fdd\u5b58",
							Zoom: "\u7f29\u653e",
							Editor: "Aipix",
							"Applied: filter": "\u5e94\u7528\uff1a\u6ee4\u955c",
							"Applied: resize": "\u5e94\u7528\uff1a\u8c03\u6574\u5927\u5c0f",
							"Applied: crop": "\u5e94\u7528\uff1a\u88c1\u526a",
							"Applied: transform": "\u5e94\u7528\uff1a\u8f6c\u6362",
							"Added: drawing": "\u6dfb\u52a0\uff1a\u7ed8\u753b",
							"Added: text": "\u6dfb\u52a0\uff1a\u6587\u5b57",
							"Added: shape": "\u6dfb\u52a0\uff1a\u5f62\u72b6",
							"Added: sticker": "\u6dfb\u52a0\uff1a\u8d34\u7eb8",
							"Added: frame": "\u6dfb\u52a0\uff1a\u8fb9\u6846",
							"Objects: merged": "\u5bf9\u8c61\uff1a\u5408\u5e76",
							"Applied: rounded corners": "\u5e94\u7528\uff1a\u5706\u89d2",
							"Changed: background": "\u66f4\u6539\uff1a\u80cc\u666f",
							"Changed: background image": "\u66f4\u6539\uff1a\u80cc\u666f\u56fe\u7247",
							"Added: overlay image": "\u65b0\u589e\uff1a\u53e0\u52a0\u56fe\u7247",
							Initial: "\u521d\u59cb\u5316",
							"Loaded: state": "\u52a0\u8f7d\uff1ajson",
							"Changed: style": "\u66f4\u6539\uff1a\u6837\u5f0f",
							"Photo resized.": "\u56fe\u7247\u5927\u5c0f\u5df2\u4fee\u6539",
							"File Name": "\u6587\u4ef6\u540d\u79f0",
							"AI-Segmentaion": "AI\u62a0\u56fe",
							"Open a photo or design to get started.": "\u6253\u5f00\u56fe\u7247\u6216\u65b0\u5efa\u5f00\u59cb\u8bbe\u8ba1",
							"Open Photo": "\u6253\u5f00\u56fe\u7247",
							"Create New": "\u65b0\u5efa\u753b\u5e03",
							"or use a sample": "\u4f7f\u7528\u793a\u4f8b\u56fe\u7247",
							Quality: "\u8d28\u91cf",
							"Background Image": "\u6253\u5f00\u56fe\u7247",
							"Overlay Image": "\u7f6e\u5165\u56fe\u7247",
							"Editor Project File": "\u5bfc\u5165\u9879\u76ee\u6587\u4ef6"
						},
						lang_ru: {
							filter: "\u0444\u0438\u043b\u044c\u0442\u0440",
							resize: "\u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440",
							crop: "\u043a\u0443\u043b\u044c\u0442\u0443\u0440\u0430"
						}
					}
				},
				watermarkText: "",
				onLoad: function() {
					//console.log(pixie), window.postMessage("pixieLoaded", "*")
					if(id) {
						__post('picedit/editBefore', {id}, res => {
							//console.log(res)
							var a = res.file.toDataURL();
							pixie.resetAndOpenEditor("image", a)
						})
					}
				},
				onFileOpen: function(e) {
					console.log(e)
				},
				onSave: function(e, t) {
					//console.log(e)
					layer.confirm('', {
						btn: ['保存并下载本地', '保存到服务器']
					}, (index)=> {
						console.log(t)
						layer.close(index);
						if (isPC()) t.indexOf(".json") > 1 ? download(e, t) : downloadFile(e, t);
						else {
							var o = window.open();
							t.indexOf(".json") > 1 ? o.document.write("<code>" + e + "</code>") : o.document.write(
								"<center><img src=" + e +
								" /><br><h3>\u957f\u6309\u56fe\u7247\u6216\u9f20\u6807\u53f3\u952e\u4fdd\u5b58</h3></center>"
								)
						}
					}, ()=> {
						//console.log(e)
						//console.log(t)
						if(!id) {
							__post('picedit/add',{title : t, content : e}, res => {
								console.log(res.data)
								id = res.data;
								layer.msg('保存成功');

							})
						}else{
							__post('picedit/edit',{id : id, title : t, content : e}, res => {
								//id = res.data;
								layer.msg('编辑成功');
							})
						}
						
					});
					
					return;
					
				},
				crossOrigin: !0,
				ui: {
					nav: {
						position: "bottom",
						replaceDefault: !0,
						items: [
							/*{
							name: "AI-Segmentaion",
							icon: "add-image-custom",
							action: function() {
								var e = pixie.getTool("export").getDataUrl("jpeg");
								layer.open({
									type: 2,
									shadeClose: !1
								}), $.post("aipix.php", {
									image: e
								}, function(t) {
									rsjson = JSON.parse(t), console.log(rsjson), 1 == rsjson
										.success && convertURIToImageData(e, 0, 0).then(function(e) {
											convertURIToImageData("data:image/png;base64," +
													rsjson.predictions.sal, e.width, e.height)
												.then(function(t) {
													for (var o = 0; o < t.data.length; o +=
														4) e.data[o + 3] = t.data[o];
													console.log("max alpha:0"), console.log(
														"min alpha:255");
													var n = document.getElementById("rest");
													n.width = e.width, n.height = e.height, n
														.getContext("2d").putImageData(e, 0,
															0);
													var a = n.toDataURL();
													pixie.resetAndOpenEditor("image", a)
												})
										}), layer.closeAll()
								})
							}
						},*/
						{
							type: "separator"
						}, {
							name: "filter",
							icon: "filter-custom",
							action: "filter"
						}, {
							name: "resize",
							icon: "resize-custom",
							action: "resize"
						}, {
							name: "crop",
							icon: "crop-custom",
							action: "crop"
						}, {
							name: "transform",
							icon: "transform-custom",
							action: "transform"
						}, {
							type: "separator"
						}, {
							name: "draw",
							icon: "pencil-custom",
							action: "draw"
						}, {
							name: "text",
							icon: "text-box-custom",
							action: "text"
						}, {
							name: "shapes",
							icon: "polygon-custom",
							action: "shapes"
						}, {
							name: "stickers",
							icon: "sticker-custom",
							action: "stickers"
						}, {
							name: "frame",
							icon: "frame-custom",
							action: "frame"
						}, {
							type: "separator"
						}, {
							name: "corners",
							icon: "rounded-corner-custom",
							action: "corners"
						}, {
							name: "background",
							icon: "background-custom",
							action: "background"
						}, {
							name: "merge",
							icon: "merge-custom",
							action: "merge"
						}]
					},
					showExportPanel: !0,
					theme: "light",
					mode: "inline"
				},
				tools: {
					filter: {
						replaceDefault: !0,
						items: ["grayscale", "blackWhite", "sharpen", "invert", "vintage", "polaroid", "kodachrome",
							"technicolor", "brownie", "sepia", "removeColor", "brightness", "gamma", "noise",
							"pixelate", "blur", "emboss", "blendColor"
						]
					},
					import: {
						validExtensions: ["png", "jpg", "jpeg", "svg", "json", "gif", "webp", "bmp"]
					}
				}
			});

			function isPC() {
				for (var e = navigator.userAgent, t = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"], o = !
						0, n = 0; n < t.length; n++)
					if (e.indexOf(t[n]) > 0) {
						o = !1;
						break
					} return o
			}

			function downloadFile(e, t) {
				let o = document.createElement("a"),
					n = function(e) {
						let t = e.split(";base64,"),
							o = t[0].split(":")[1],
							n = window.atob(t[1]),
							a = n.length,
							i = new Uint8Array(a);
						for (let e = 0; e < a; ++e) i[e] = n.charCodeAt(e);
						return new Blob([i], {
							type: o
						})
					}(e);
				document.createEvent("HTMLEvents").initEvent("click", !0, !0), o.download = t, o.href = URL.createObjectURL(n), o
					.click()
			}

			function download(e, t) {
				var o = document.createElement("a");
				if (o.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(e)), o.setAttribute("download",
						t), document.createEvent) {
					var n = document.createEvent("MouseEvents");
					n.initEvent("click", !0, !0), o.dispatchEvent(n)
				} else o.click()
			}

			function convertURIToImageData(e, t, o) {
				return new Promise(function(n, a) {
					if (null == e) return a();
					var i = document.createElement("canvas"),
						r = i.getContext("2d"),
						c = new Image;
					c.addEventListener("load", function() {
						t * o == 0 ? (i.width = c.width, i.height = c.height) : (i.width = t, i.height = o), r
							.drawImage(c, 0, 0, i.width, i.height), n(r.getImageData(0, 0, i.width, i.height))
					}, !1), c.src = e
				})
			}
			
		</script>




	</body>
</html>
